<template>
  <div class="text-center text-tip" style="padding: 30px;">
    <div v-if="type">
      <span style="font-size: 30px;"><i :class="iconClass"></i></span>
      <br>
      <small class="text-muted">{{text}}<slot></slot></small>
    </div>
    <div v-else="" :class="{horizontal: direction === 'horizontal'}">
      <div class="icon" style="margin: 0px auto;" :style="{width: width}">
        <img src="img/empty-1.png" :width="width" v-if="iconType === '1'">
        <img src="img/empty-2.png" :width="width" v-else>
      </div>
      <div class="text" style="padding-top: 10px;">{{text}}<slot></slot></div>
    </div>
  </div>
</template>

<script>
  import {prefix} from '../config';
  const iconClass = {
    info: 'info-circle',
    error: 'close-circle',
    warning: 'warning',
    success: 'check-circle'
  };
  export default {
    name: prefix + 'EmptyTip',
    props: {
      type: {
        type: String,
        default: ''
      },
      text: {
        type: String,
        default: '暂时没有数据！'
      },
      iconType: {
        type: String,
        default: '1'
      },
      width: {
        type: String,
        default: '200px'
      },
      direction: {
        type: String,
        default: 'vertical' // horizontal, vertical
      }
    },
    computed: {
      iconClass () {
        return iconClass[this.type];
      }
    }

  };
</script>

<style lang="scss" scoped>
  .horizontal{
    display: flex;
    .icon{
      width: 200px;
    }
    .text {
      flex: 1;
      text-align: left;
      padding-left: 20px;
    }
  }
</style>


